<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0  maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加银行卡</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="icon_font/iconfont.css">
</head>
<style>
    body {
        background-color: #eff3f6;
        font-size: 18px;
    }

    header {
        background-color: #fff;
        border-bottom: 1px solid #eff3f6;
        padding: 10px;
        box-sizing: border-box;
    }

    header h3 {
        margin: 0;
        position: absolute;
        left: 50%;
        top: 2%;
        transform: translateX(-50%);
    }

    .white {
        font-size: 24px;
    }

    .big_group {
        border-bottom: 1px solid #eff3f6;
        padding-bottom: 10px;
    }

    .big_group img {
        width: 60px;
        height: 60px;
    }

    .big_group text {
        margin-left: 20px;
    }

    .group {
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        border-bottom: 1px solid #eff3f6;
        padding: 10px;

    }

    .group img {
        width: 50px;
        height: 50px;
    }

    .gray {
        color: gray;
    }

    input {
        border: none;
        text-align: right;
        outline: none;
    }

    .btn-info.active {
        background-color: transparent;
        border-color: transparent;
        color: #000;
    }

    .btn.active {
        box-shadow: none;

    }

    .btn-info {
        background-color: transparent;
        border-color: transparent;
    }

    .btn-lg {
        padding: 0;
    }

    .red {
        background-color: #FF3366;
        color: #fff;
        border-radius: 20px;
        margin-top: 40px;
        width: 90%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        border: none;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .form-control {
        width: 71px;
        padding: 0;
    }

    .form-group {
        margin-bottom: 0;
    }

    .aaa select {
        border: none;
        outline: none;
        border: none;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        direction: rtl;
        text-align: center;
        background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll rightright center transparent;
    }

    .aaa select::-ms-expand {
        display: none;
    }

    select option {
        text-align: center;
    }
    .add {
            margin-left: 15px;
            color: #fff !important;
            background-color: #50d2c2;
            border-radius: 30px;
            height: 30px;
            padding: 0 20px;
            font-size: 14px;
            border: none;
        }
</style>

<body>
    <div>
        <header>
            <i class="iconfont white  icon-zuojiantou"></i>
            <h3>添加银行卡</h3>
        </header>
        <div class="group" style="box-sizing: border-box;">
            <text class="gray">基本信息</text>
        </div>
        <div class="group aaa">
            <text class="gray">姓名</text>
            <text>哈哈哈</text>
        </div>
        <div class="group aaa">
            <text class="gray">录入来源区别</text>
            <text>中介</text>
        </div>
        <div class="group aaa" >
            <text class="gray">公司</text>
            <text>链家</text>
        </div>

        <div class="group" style="margin-bottom: 20px;">
            <text class="gray"><span style="color:#FF3366">*</span>最擅长商圈</text>
            <button class="add">去添加</button>
        </div>
        <div class="group">
            <text class="gray">银行信息录入</text>
            
        </div>
        <div class="group">
            <text class="gray"><span style="color:#FF3366">*</span>开户银行</text>
            <input placeholder="请输入开户银行" ></input>
        </div>
        <div class="group">
            <text class="gray"><span style="color:#FF3366">*</span>开户支行</text>
            <input placeholder="请输入开户银行" ></input>
        </div>
        <div class="group">
            <text class="gray"><span style="color:#FF3366">*</span>开户城市</text>
            <input placeholder="请输入开户城市" ></input>
        </div>
        <div class="group">
            <text class="gray"><span style="color:#FF3366">*</span>开户人</text>
            <input placeholder="请输入开户人姓名" ></input>
        </div>
        <div class="group">
            <text class="gray"><span style="color:#FF3366">*</span>开户账号</text>
            <input placeholder="请输入开户账号" ></input>
        </div>
        <div class="group">
            <text class="gray">身份证号</text>
            <input placeholder="请输入身份证号" ></input>
        </div>
    </div>
    <button type="button" class="red" id="save">确认保存</button>

</body>
<script>

</script>

</html>